We’re excited to include guest posts on our blog from interesting people and companies in the industry. This post was provided by Practicum, a remote bootcamp for web developers, data analysts, and data scientists. Students receive 24/7 support from tutors, code reviewers, and peers; learn soft skills; and create real-life projects to help them hired in an ideal tech job. Check out our article about CSS preprocessors.
When can CSS preprocessors come in handy?
When you first start learning web development, you might think, “wouldn’t it be great if we could somehow communicate our instructions more naturally with the browser?” If you wanted to place a link in the top-right corner of a page, you could simply say, “put that link in the top-right corner!” The thing is, the browser doesn’t understand our language. The only three languages the browser understands are HTML, CSS, and JavaScript. Therefore, everything the browser should display will need to be translated into one of these languages.
As a result, most web development courses move progressively through these languages. HTML comes first, then CSS, and finally, JavaScript. This is a solid plan since the complexity of the material increases gradually. You first learn about basic code structure, then styling, and finally, you learn about the interaction between elements.
Knowing these three languages is enough to create any webpage. But writing a large project using only JavaScript can be demoralizing as it can often involve rewriting code that millions of programmers have written before. Repeatedly writing HTML blocks with the same content can be boring for a developer. Likewise, the need to repeat CSS styles many times when all the text on the web site uses the same several combinations of typographic styles is depressingly inefficient. That’s why developers have created programs that simplify the process of writing code at each step in the development process.
Mixins
This might seem strange for people who are already familiar with CSS, but when you actually get a job, you are very likely to find that the most frequently used colors and sizes are placed in a separate file that stores these settings, and that the sets of properties that you regularly need are stored in separate blocks of code called “mixins”. This is all done by preprocessors, which are programs that developers use to save time writing code. You write in a preprocessor language, and the computer translates this language into CSS.
In this article, we’ll discuss how to use CSS preprocessors. Learning how to use them won’t take too long, especially if you’re already familiar with CSS and the basics of programming.
An alternative approach to CSS
Imagine you are working on a huge website that involves a lot of user interaction: buttons, inputs, text fields, etc. Let’s say you have defined the sizes of these elements in pixels and the numbers of pixels are all multiples of 4. For example, a small button is 12px in height, a medium button is 16px, and a large button is 24px. In your CSS file, you have over 100 size definitions because there is such a huge collection of interface elements.
Then, a designer calls you: “Turns out, multiples of 4 don’t work on newer Retina screens. We need to change the numbers to multiples of 5.”
Now you have to sift through over 100 definitions and manually re-calculate each one.
Then the designer calls you up again: “Actually, we’ll need to make the sizes multiples of 3 for mobile devices and multiples of 6 for the desktop version. Can you do that?”
At this point, you’d already be thinking about automating your CSS: adding variables, loops, and other tools that can recalculate all of those sizes for you, without the need to manually update them.
Examples
For example, to make all the sizes multiples of 6, you could introduce the following variable:
And inside your CSS designs, you could use that variable in an expression. Here, we’ve used the $multiple-desktop variable to represent a value of 6 in our SCSS code:
Etc.
That way, when you need to change the sizes, you only need to adjust the value of the $multiple-desktop variable, and not the hundreds of actual definitions inside the CSS. Change one variable in your CSS, and all of the expressions that use it will automatically recalculate their values.
Let’s take another example. Consider a project where you use the same corporate style for headers throughout the website. You might want to create variables for these styles, which could then be used any time they’re needed. This way, changing the color hue in your design will not force you to update hundreds of lines of text. You’ll just update the value of a variable. Here’s an example of this SCSS code:
And this is how it’s going to be translated into CSS:
Simple and elegant.
Congratulations! You just learned how to use CSS preprocessing.
So, what is CSS preprocessing?
CSS preprocessing means generating a lot of CSS code using some other code that is easier for you, the developer, to maintain. This source code can contain:
- mathematical expressions — so you don’t need to call the calc() function in CSS
- variables — so you don’t need to recalculate values manually
- loops — so you can create lots of CSS instructions based on a few patterns
- functions — so you can include pre-made chunks of CSS where you need them
- logic — if this, then that
In general, developers write a small piece of code and then put it into the preprocessor, which in turn generates the clean, ready-to-use CSS.
The standards for CSS preprocessing
Today, developers use two main preprocessing engines: Leaner Style Sheets (LESS) and Syntactically Awesome Style Sheets (SASS). While these programs are basically the same, they have differences in syntax, which means that they use languages with different rules. If you are looking to learn a preprocessor, it makes sense to first find out which of them you will be using at work. But more often, developers learn both standards to use in different projects.
CSS Preprocessors pros and cons
✅ Ideal for large-scale projects with hundreds or thousands of elements to style
✅ Increases the capabilities of basic CSS
✅ Makes it easier to maintain and rebuild complex CSS
✅ The original code is usually more legible than the resulting CSS
❌ For small projects, it’s much easier to just write pure CSS
❌ Different engines require different syntaxes
❌ When you use loops and logic, the resulting CSS code can be hard to read
❌ Involves adding an extra piece of software to your process
❌ Requires you to understand programming concepts like loops and conditions
Bottom line: Preprocessors are used to make writing CSS code easier.
But why not just use CSS?
If you’re already well versed in CSS, you may have noticed that the examples above can be implemented using custom properties, without having to turn to preprocessing. However, the reason that SCSS and LESS have been so popular over the years and continue to enjoy such popularity today is that they were developed long before CSS custom properties were first introduced. As such, a great deal of projects already use SCSS and LESS variables, and so developers continue to use them. Moreover, while CSS custom properties have a lot of advantages, they are still relatively new and have yet to gain widespread support.
Preprocessors also have a specific strength: you can use them to visualize a component-based development approach in the stylesheets. According to this approach, one block on the webpage includes specific elements whose behavior it controls. With SCSS, you’ll be able to follow this concept even in your stylesheets:
In this example, the form block is represented with an encapsulated object in the code, storing all of its styles inside. Such code is easy to read compared to CSS, where styles for different components of a block are usually stored in different places.
Mixins
And, finally, the best feature of preprocessors is something called “mixins.” Imagine that your website uses lots of similar elements with the same few variations of styles. In CSS you’d probably solve this problem by creating separate classes describing common parts of these styles.
Say you create two new CSS classes:
Then add them to your HTML code:
But in SCSS, you can work exclusively within your stylesheets, without having to worry about HTML, by using mixins — reusable blocks of styles:
In this example, you’re solving the problem without having to create new classes. All the cards on your webpage will have rounded edges and a pink background, but the text style in them will change depending on your choice of mixins.
To sum up
We love preprocessors because they allow us to add a little more programming magic to CSS. Of course, in order to use them, you need to learn how CSS works first. Once you do that, you’ll be able to master any preprocessor in the world.
Did you enjoy learning more about advanced topics in CSS? You may be interested in Practicum. Explore our tech education platform for online learning to amp up your career.
Pathrise is a full service organization that helps people land their dream job in tech. We work extensively with software engineers by providing technical workshops, 1-on-1 mentoring sessions, and pair programming sessions. In addition, we offer guidance on other components of the job search, including resume and portfolio optimization, LinkedIn optimization, behavioral interview preparation, reverse recruiting strategies, salary negotiation, and more.
Apply today.
